<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <div class="search fr">
        <div>
          <el-input
            v-model="selectForm.name"
            size="medium"
            placeholder="老人姓名"
          ></el-input>
        </div>
        <div>
          <el-input
            v-model="selectForm.mobile"
            size="medium"
            placeholder="联系方式"
          ></el-input>
        </div>
        <div>
          <el-input
            v-model="selectForm.idfer"
            size="medium"
            placeholder="身份证"
          ></el-input>
        </div>

        <el-button
          size="medium"
          type="primary"
          icon="el-icon-search"
          class="fr"
        >
          搜索
        </el-button>
      </div>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @changeForMal="changeForMal"
        @cancelOrder="cancelOrder"
      ></app-table>
    </div>
    <el-dialog
      title="邱霄"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <test-Form :key="key" :gutter="30" :data="formData"></test-Form>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import testForm from "@/components/CommonForm/testForm";
  export default {
    name: "Index",
    components: { appTable, testForm },
    data() {
      return {
        key: Math.random(),
        dialogVisible: false,
        formData: {},
        rules: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别" },
          { prop: "phone", label: "联系方式" },
          { prop: "num", label: "床位编号" },
          { prop: "status", label: "入住状态" },
          { prop: "person", label: "护理人员" },
          { prop: "time", label: "入住时间" },
        ],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.pageData = {
        limit: 10,
        offset: 0,
        total: 1,
        type: 4,
        list: [
          {
            name: "赖美云",
            age: "90",
            sex: "女",
            phone: "13782951835",
            num: "101",
            status: "是",
            person: "杨超越",
            time: "2020-04-05",
          },
          {
            name: "丁宁",
            age: "90",
            sex: "女",
            phone: "13782951835",
            num: "101",
            status: "是",
            person: "杨超越",
            time: "2020-04-05",
          },
        ],
      };
    },
    methods: {
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = {};
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        // this.selectForm.offset = (val - 1) * 10
      },
      cancelOrder(rows) {
        // this.formData = rows.rows[0];
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      changeForMal(rows) {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = rows.rows[0];
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      closeDialogForm() {
        this.dialogVisibleForm = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        display: inline-block;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
</style>
